import React, {PureComponent} from 'react';
import {Text, TextInput, TouchableOpacity, View} from 'react-native';
import CommonStyles from '../commonStyles';

export default class extends PureComponent {
    state = {
        nickname: ''
    };
    submit = () => {
        const {submit} = this.props;
        const {nickname} = this.state;
        submit(nickname);
    };

    componentWillReceiveProps(props) {
        if (props.userInfo !== this.props.userInfo) {
            this.setState({
                nickname: props.userInfo.nickname
            });
        }
    }

    render() {
        const {nickname} = this.state;
        return (
            <View style={CommonStyles.container}>
                <View style={CommonStyles.list}>
                    <View style={[CommonStyles.item, {borderBottomWidth: 0}]}>
                        <TextInput
                            returnKeyType="done"
                            clearButtonMode="always"
                            underlineColorAndroid="transparent"
                            placeholder="请输入昵称"
                            style={[CommonStyles.input]}
                            onChangeText={text => this.setState({
                                nickname: text.trim()
                            })}
                            value={nickname}
                            maxLength={20}
                        />
                    </View>
                </View>
                <TouchableOpacity onPress={this.submit}>
                    <View style={CommonStyles.submitBtnWrap}>
                        <Text style={CommonStyles.submitBtnText}>确认修改</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}
